<template>
  <div class="step-nlbp">
    <div style="color: blue">
      &lt;routes xmlns="http://camel.apache.org/schema/spring"&gt;
    </div>
    <div style="color: blue; padding-left: 16px">
      &lt;route id="${能力编码}"&gt;
    </div>
    <el-input
      type="textarea"
      :rows="20"
      placeholder="请输入内容"
      v-model="serviceTextArea"
      :disabled="disabled"
      style="padding-left: 32px"
    >
    </el-input>
    <div style="color: blue; padding-left: 16px">&lt;/route&gt;</div>
    <div style="color: blue">&lt;/routes&gt;</div>
    <div style="color: red">备注：路由文件中&amp;符号需要转义为&amp;amp;</div>
  </div>
</template>

<script>
// import { mapState, mapMutations } from 'vuex'


import {serviceStore} from '@slc/store/service';
import {flowServiceStore} from '@slc/store/flowService';
import {mapActions, mapState} from 'pinia';

import { getExpertDsl } from '@slc/api/slc/inventory'
export default {
  name: 'step-expert',
  props: ['disabled'],
  computed: {
    ...mapState(serviceStore, ['serviceVerId', 'serverReleaseType']),
      ...mapState(flowServiceStore, ['serviceTextArea']),
     serviceTextArea: {
      get() {
        return this.serviceTextArea
      }
      // ,
      // set(val) {
      //   this.changeServiceTextArea(val)
      // }
    }
  },
    watch: {
      serviceTextArea: {
        deep: true,
      handler(val) {
        this.changeServiceTextArea(val)
      }
    }
  },
  mounted() {
    this.handleDefaultShow()
  },
  activated() {
    this.handleDefaultShow()
  },
  methods: {
    ...mapActions(flowServiceStore, ['setCurrentShape', 'setServiceTextArea','changeServiceTextArea']),
    // 初始化内容
    async handleDefaultShow() {
      const res = await getExpertDsl({ serviceVerId: this.serviceVerId })
      console.log(res)
      if (res.code === '200') {
        console.log(res)
        this.setServiceTextArea(res.data ? res.data.contentText : '')
      }
      this.setCurrentShape('custom-start')
    }
  }
}
</script>

<style lang="scss" scoped>
.step-nlbp {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  height: 100%;
}
:deep(.el-input--medium .el-input__inner ){
  height: 100% !important;
}
</style>
